<template>
  <view :class="currentTheme">
    <a-nabbar name="提现记录" ref="nav"/>
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback">
			<view  v-for="(item, i) in dataList" :key="i">
				<u-sticky :offset-top="offsetTop">
					<view class="u-flex u-row-between date u-padding-left-32 u-padding-right-32">
						<view class="gray u-font-34 " @click="showPicker(i)">
							<text style="margin-right: 10rpx">{{item.ym | formatYM}}</text>
							<u-icon name="xuanze" size="20" custom-prefix="custom-icon"/>
						</view>
						<view class=" u-font-24 text-order-time">提现<text class="primary">￥{{item.total | getFixed}}</text></view>
					</view>
				</u-sticky>
				<view class="flex paycheck u-padding-left-32 u-padding-top-24" v-for="(data, index) in item.list" :key="index">
					<view>
						<u-icon name="alipay"  custom-prefix="custom-icon" color="#1296db" size="40" v-if="data.userAccountType=='zhifubao'"></u-icon>
						 <u-icon name="weixin11"  custom-prefix="custom-icon" color="#61DC77" size="40"  v-if="data.userAccountType=='weixin'"></u-icon>
						 <u-icon name="yinhangqia"  custom-prefix="custom-icon" color="#FFFFFF" size="30"  v-if="data.userAccountType=='yinhangka'"></u-icon>
					</view>
					<view class="paychange">
						<view class="u-flex u-row-between">
							<view class="name">
								<!-- <view class="u-font-32 box-title" v-if="data.userAccountType=='yinhangka'">
									{{data.userAccountRealName || '无昵称'}}（****{{data.userAccountLoginId.substring((data.userAccountLoginId).length-4)}}）
								</view> -->
								<view class="u-font-32 box-title">
									<!-- {{data.userAccountRealName || '无昵称'}} -->
									余额提现到{{data.userAccountType=='weixin'?'微信':'支付宝'}}（{{data.userAccountRealName && data.userAccountRealName.substring(0,6) || '无昵称'}}）
								</view>
								<view class="u-font-30 u-margin-top-25 text-tips">{{data.createTime}}</view>
							</view>
							<view class="check u-text-center">
							 <view class="text-white-black-reversals u-font-24">
								 {{data.money | getFixed}}
							 </view>
							 <view 
							 :class="['u-font-20', data.status === 2?'text-color-80':'text-color-txtTheme']">{{data.status | getOutStatus}}</view>
							</view>
						</view>
						<view class="u-font-20 u-text-right u-margin-top-10" v-if="data.status==2">
							<text class="text-color-txtTheme">未通过原因：</text>
							<text class="--title-color">{{data.reason || ''}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
import upCallback from '@/mixins/upCallbackMixin.js'
import { BigNumber } from "bignumber.js";
import dayjs from 'dayjs'
export default {
	mixins:[upCallback],
  name: "record",
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false
      },
      show: false,//时间选择
			apiType:'userCashOutRecord',
			apiModule:'shopApi',
			name:'findYmPage',
      payIndex:0,
			form:{
				endTime:''
			},
			currentMonth:'',
			offsetTop:44,
			secondArr:true //二维数组特殊处理upCallback mixins
    }
  },
	computed: {
		currentMonthObj() {
			return this.dataList[this.payIndex] || {}
		},
	},
	onLoad() {
		//获取当前年月
		this.currentMonth = dayjs().format('YYYY年MM月')
		this.form.endTime = dayjs().format('YYYY-MM-01')
		const info = uni.getSystemInfoSync();
		let height = info.platform == 'ios' ? 44 : 48;
		const offsetTop = height + info.statusBarHeight;
		// #ifdef H5
			this.offsetTop = 0
		// #endif
		// #ifdef MP-WEIXIN
			this.offsetTop = offsetTop/(uni.upx2px(offsetTop)/offsetTop)
		// #endif
	},
  methods:{
		dataListCallBack({content}){
			content.forEach(val=>{
				const flag = this.dataList.some(item=>item.ym===val.ym)
				if(flag){ //有相同月份
					const index = this.dataList.findIndex(item=>item.ym==val.ym)
					if(index>-1) this.dataList[index].list = [...this.dataList[index].list,...val.list]
				}else{
					this.dataList = [...this.dataList,val]
				}
			})
		},
    confirm(e){
			this.currentMonth = dayjs(`${e.year}-${e.month}`).format('YYYY年MM月')
			this.form.endTime = dayjs(`${e.year}-${e.month}`).format('YYYY-MM-01')
			this.downCallback()
    },
		showPicker(){
			this.show = true
		},
  },
	filters: {
		formatYM(value) {
			return dayjs(value).format('YYYY年MM月');
		},
		getFixed(money){
			if(!money) return 0
			const x = new BigNumber(money)
			return x.toFixed(2)
		},
		getOutStatus(status){
			if(status>-1){
				return ['审核中','已成功','已拒绝'][status]
			}
		}
	}
}
</script>

<style scoped lang="scss">
  .gray{
    color: var(--reversal-color);
  }
  .primary{
    color: var(--theme-color);
  }
  .date{
    height: 110rpx;
		background: var(--background-color);
  }
	.flex{
		display: flex;
	}
  .paycheck{
    box-sizing: border-box;
		background:var(--background-three-color) ;
    .paychange{
      width: 100%;
      margin-left: 24rpx;
      padding-right: 32rpx;
			padding-bottom: 26rpx;
      border-bottom: 1rpx solid var(--line-color);
    }
		&:last-child{
			.paychange{
        border-bottom: none;
			}
    }
    .name{
			// color: #B0B2D8;
    }
  }
	.text-color-80{
		color: #808080;
	}
</style>